<template>
  <div id="energy_charts" style="width: 100%;height: 100%;">
      <div class="nodata" v-if="!this.data || !this.data.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this._initCharts()
  },
  watch: {
      data(newv) {
          this._initCharts()
      }
  },
  methods: {
    _initCharts () {
        if(!this.data || !this.data.length) {
            return
        }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("energy_charts"))
      
      
      //柱状图  渐变色双y轴

      //可以鼠标滚动

      //点击背景和点击图形触发不同的事件

      let dataList = []
      const labelList = []
      for(let i=0; i < this.data.length; i ++) {
         
          labelList.push(this.data[i].time)
          dataList.push(this.data[i].value)
      }


      const option = {
          grid: {
              left: "15%", //距离左边的距离
              right: "10%", //距离右边的距离
              bottom: "25%", //距离下边的距离
              top: "25%" //距离上边的距离
          },
          title: {
              text: '输出功率（KW）',
              left: '4%',
              top: '0',
              textStyle: {
                  color: 'rgba(255,255,255,1)',
                  fontSize: this.$options.filters.fontSize(0.15),
                  fontWeight: 50000,
                  fontFamily: 'PingFang SC'
              }
          },
          toolbox: {
              show: false,
              feature: {
                  dataView: {
                      show: true,
                      readOnly: true
                  },
                  magicType: {
                      show: true,
                      type: ["line", "bar"]
                  },
                  restore: {
                      show: false
                  },
                  saveAsImage: {
                      show: true,
                      name: "能源统计",
                      pixelRatio: 2
                  }
              },
              iconStyle: {
                  normal: {
                      borderColor: "#41A7DE"
                  }
              },
              itemSize: this.$options.filters.fontSize(0.12),
              top: this.$options.filters.fontSize(0.2),
              right: this.$options.filters.fontSize(0.22)
          },
          tooltip: {
              trigger: "axis",
              axisPointer: {
                  type: "shadow",
                  crossStyle: {
                      color: "#fff"
                  }
              },
          },
          xAxis: [{
              type: "category",
              data: labelList,
              axisLabel: {
                  textStyle: {
                      color: "#fff",
                      fontSize: this.$options.filters.fontSize(0.14),
                      fontFamily: "Microsoft YaHei"
                  }
              },
              axisLine: {
                  show: false
              },
              axisTick: {
                  show: false
              }
          }],
          yAxis: [{
                type: "value",
                axisLabel: {
                    formatter: "{value}",
                    textStyle: {
                        color: "rgba(255,255,255,1)",
                        fontSize: this.$options.filters.fontSize(0.12),
                        fontFamily: "Microsoft YaHei"
                    },
                },
                splitNumber: 3,
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.1)"
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            }
          ],
          dataZoom: [
              {
                type: 'slider', //图表下方的伸缩条
                show: true, //是否显示
                realtime: true, //拖动时，是否实时更新系列的视图
                start: 0, //伸缩条开始位置（1-100），可以随时更改
                end: dataList.length > 15 ? 35 : 100, //伸缩条结束位置（1-100），可以随时更改
                backgroundColor: '#303030',
                fillerColor: '#828282',
                zoomLock:true, 
                bottom: '0',
                height: this.$options.filters.fontSize(0.06),
                borderColor: 'transparent',
                handleIcon: "M0,0 v9.7h5 v-9.7h-5 Z",
                    handleStyle: {
                      /*手柄的样式*/
                      color: "transparent",
                      borderColor: "transparent",
                    },
                textStyle: {
                    color: 'transparent'
                },
                  
              },
              {
              type: 'inside',
              start: 0,
              end: dataList.length > 15 ? 35 : 100
          }],
          series: [{
            name: "输出功率(KW)",
            nameTextStyle: {
              color: 'rgba(255,255,255,1)',
              fontSize: this.$options.filters.fontSize(0.12),
            },
            type: "bar",
            data: dataList,
            barGap: '-100%',
            barCategoryGap: '60%',
            itemStyle: {
                emphasis: {
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#888'
                        },
                        {
                            offset: 1,
                            color: '#222'
                        }
                    ])
                },
                normal: {
                    barBorderRadius: 2,
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#888'
                        },
                        {
                            offset: 1,
                            color: '#222'
                        }
                    ])
                }
            },
          }]
      }

      //这里先解绑，防治click事件触发多次
      myChart.off('click')

      //这里使用getZr(),直接使用click方法点击背景不会触发
      myChart.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY]

          if (myChart.containPixel('grid', pointInPixel)) {
              const pointInGrid = Math.abs(myChart.convertFromPixel(
                  'grid',
                  pointInPixel
              )[0])
              //这个就是当前的index下标
              console.log(pointInGrid)
              //这里就是当前的值
              console.log(dataList[pointInGrid])

          } else {
              console.log('点击的是背景...')
          }
      })







      // 绘制图表
      myChart.setOption(option)

    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>